<template>
  <div class="container">
    <div class="login-wrapper">
      <div class="header">
        <p class="h3">乐享生活</p>
        <p>乐 &nbsp;&nbsp;享&nbsp;&nbsp; 每&nbsp; 一&nbsp; 天</p>
      </div>

      <div class="form-wrapper">
        <cell-group inset id="p1" @input="changer">
          <field
            class="aa"
            type="text"
            v-model="phonenum"
            placeholder="请输入手机号"
            label="+68"
            clearable
          />

          <field
            class="aa"
            v-model="phonecode"
            type="password"
            center
            label="验证码："
          >
            <template #button>
              <Button id="btnma" @click="getcode" size="small" type="primary"
                >获取验证码</Button
              >
            </template>
          </field>
        </cell-group>
        <Button class="btn" @click="loginHandle" :color="btncor">
          登 　录
        </Button>

        <div class="yanzm">
          <router-link :to="{ name: 'Login' }">
            <div style="color: gray">账号密码登录</div></router-link
          >
        </div>
      </div>
      <router-link :to="{ name: 'Reg' }"
        ><div class="msg">没有账户，立即注册</div></router-link
      >
      <div class="text-wrapper_4">
        <input type="checkbox" v-model="checked" />
        <span class="text_12" style="color: gray">已阅读并同意</span>

        <router-link :to="{ name: 'yonghuxieyi' }">
          <span class="text_13" style="color: blue">《用户协议》</span>
        </router-link>
        <span class="text_14">、</span>
        <router-link :to="{ name: 'yinsiquanxian' }">
          <span class="text_15" style="color: blue">《隐私政策》</span>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { Field, CellGroup, Toast, Button } from 'vant'
import { useRouter } from 'vue-router'
import { setToken, getToken } from '../utils/tools'
import axios from 'axios'
const phonenum = ref('')
const phonecode = ref('')
const code = ref('') //验证码
const checked = ref(true)
const { replace } = useRouter()
const router = useRouter()
const a = getToken()
console.log(a)
const btncor = ref('') //按钮颜色
const changer = () => {
  if (phonenum.value || phonecode.value) {
    btncor.value = 'linear-gradient(to right, #ba6fcb,#fbc2eb )'
  } else {
    btncor.value = 'gray'
  }
}
//获取验证码/api/member/code
const getcode = () => {
  axios
    .get(
      'http://47.104.75.203:8080/api/member/code?',
      `mobile=${phonenum.value}`
    )
    .then((res) => {
      console.log(res)
      phonecode.value = res.code
    })
}
const loginHandle = async () => {
  if (!checked.value) {
    Toast('请勾选同意协议')
    return
  }
  if (phonenum.value && phonecode.value) {
    console.log(phonenum.value, phonecode.value)
    axios
      .post(
        'http://47.104.75.203:8080/api/member/code',
        `mobile=${phonenum.value}&code=${phonecode.value}`
      )
      .then((res) => {
        console.log(res)
        if (res.code === 200) {
          Toast.success('验证成功')
          setToken(res.data)
          replace({
            name: 'My'
          })
        }
      })
      .catch((res) => {
        Toast.fail('请求出错了')
      })
  } else {
    Toast('请输入手机号或验证码')
  }
}
</script>
<style scoped>
#btnma {
  float: right;
  margin-right: 17px;
}
.text-wrapper_4 {
  margin-top: 20px;
}
.container {
  height: 100%;
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
.login-wrapper {
  background-color: rgba(255, 255, 255, 0.229);
  width: 358px;
  height: 500px;
  border-radius: 15px;
  padding: 0 20px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.header {
  text-align: center;
}
.header .h3 {
  font-size: 50px;
  color: #fc8432;
  font-weight: Semibold;
  margin-bottom: 0;
  font-family: PingFangSC-Semibold;
}
.header p {
  font-size: 25px;
  color: #666666;
  margin-bottom: 20px;
}

.btn {
  font-size: 20px;
  color: blue;
  font-weight: 700;
  text-align: center;
  padding: 12px;
  width: 100%;
  margin-top: 40px;
  border-radius: 18px;
  color: white;
  background-color: gray;
  /* background-image: linear-gradient(to right, #a6c1ee, #fbc2eb); */
}
.msg {
  color: blue;
  text-align: center;
  line-height: 88px;
}
a {
  text-decoration-line: none;
  color: #abc1ee;
}
/* 0000 */
#p1 {
  width: 100%;
  height: 120px;
  margin: 0 auto;
}
#p1 .aa {
  margin: 10px auto;
}
.yanzm {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  color: #666666;
}
</style>
